<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('信件录入-新增页面')"/>
    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/qxEasyUI/themes/default/easyui.css}">
</head>
<body style="background-color: #F4F6FA;">
<div class="main-content" style="margin: 0;padding: 0;">
    <form id="telInputForm" class="form-horizontal" style="background-color: #F4F6FA">
        <div class="col-sm-12 grid-container" style="display: flex">
            <!--     左       -->
            <div class="col-sm-8 entering-page">
                <!--   来电基本信息     -->
                <div class="col-sm-12 tltieBoder">
                    <div class="blueBorder"></div>
                    <h4 style="margin:0 0 0 10px">来信人信息</h4>
                </div>
                <div class="col-sm-6">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required entering-pd">来信人</label>
                            <div class="col-sm-8">
                                <input name="fromName" placeholder="请输入"
                                       class="form-control phoneName" type="text"
                                       maxlength="5" required="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label entering-pd">联系电话</label>
                            <div class="col-sm-8">
                                <input name="fromTel" placeholder="请输入"
                                       class="form-control relationPhone"
                                       type="text"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required entering-pd">来信类别</label>
                            <div class="col-sm-8">
                                <select name="dfmClaNo" id="dfmClaNo" required
                                        th:with="telTypes=${@commonServiceImpl.findTelType()}"
                                        onchange="dropChgSendTextOnly(this,'dfmClaName');"
                                        class="form-control formSelect">
                                    <option value="">--请选择--</option>
                                    <th:block th:each="item : ${telTypes}">
                                        <option th:text="${item['CSText']}" th:value="${item['CSValue']}"></option>
                                    </th:block>
                                </select>
                                <input type="hidden" name="dfmClaName" id="dfmClaName"/>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">建议公开</label>
                            <div class="col-xs-8" style="white-space:nowrap;">
                                <label class="check-box">
                                    <input name="openX" value="1" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="openX" value="0" type="radio" checked>否（效能办）
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">同意公开</label>
                            <div class="col-xs-8" style="white-space:nowrap;">
                                <label class="check-box">
                                    <input name="openFrom" value="1" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="openFrom" value="0" type="radio" checked>否（来信人同意否）
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--关键词等-->
                <div class="col-sm-6">

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">地址</label>
                            <div class="col-xs-8">
                                <select name="fmAreaNo" id="fmAreaNo" required
                                        th:with="area=${@commonServiceImpl.findArea()}"
                                        onchange="dropChgSendTextOnly(this,'fmAreaName');"
                                        class="form-control" >
                                    <option value="">--请选择--</option>
                                    <th:block th:each="item : ${area}">
                                        <option th:text="${item['CSText']}" th:value="${item['CSValue']}" th:selected="${item['CSValue'] == user.areaNo}"></option>
                                    </th:block>
                                </select>
                                <input type="hidden" name="fmAreaName" id="fmAreaName" th:value="*{fmAreaName}"/>
                                <input name="fmAddress" placeholder="请输入"
                                       class="form-control scene theAddress" type="text"
                                       maxlength="60">
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">性别</label>
                            <div class="col-xs-8">
                                <label class="check-box">
                                    <input name="fromSex" value="1" type="radio">男
                                </label>
                                <label class="check-box">
                                    <input name="fromSex" value="0" type="radio" checked>女
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">电子邮箱</label>
                            <div class="col-xs-8">
                                <input name="fmEmail" placeholder="请输入"
                                       class="form-control relationPhone"
                                       type="text">
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd is-required">内容类别</label>
                            <div class="col-xs-8">
                                <input id="qxCT"
                                       style="width:187px;height:31px;border-radius: 5px;">
                                <input id="txtDcntAcode" name="dCntACode" type="hidden"/>
                                <input id="txtDCntAName" name="dCntAName" type="hidden"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label entering-pd">附件</label>
                        <div class="col-xs-10">
                            <div class="btn-group-sm">
                                <a class="btn btn-primary" onclick="addImage()"><i
                                        class="fa fa-plus"></i>&nbsp;上传文件</a>
                            </div>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="imgContainer" class="table">
                                    <thead>
                                    <tr class="title">
                                        <th style="text-align: center">文件</th>
                                        <th style="text-align: center">操作</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--右-->
            <div class="col-sm-6 entering-page">
                <div class="col-sm-12">
                    <!--   工单基本信息     -->
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">来信内容详情</h4>
                    </div>
                    <!--工单主题,工单编号,工单性质...-->
                    <div class="col-sm-12 entering-mt">
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required entering-pd">主题</label>
                            <div class="col-sm-10">
                                <input name="fromTopic" placeholder="请输入"
                                       class="form-control" type="text"
                                       maxlength="100"
                                       required>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd is-required">信件来源</label>
                            <div class="col-sm-10">
                                <select id="ddlFrom" name="fmSpare" class="form-control formSelect" onchange="dropChgSendTextOnly(this,'spareString');">
                                    <option value="51610">问政四川</option>
                                    <option value="51620">麻辣社区</option>
                                    <option value="51630">人民网</option>
                                    <option value="51640">人大件</option>
                                    <option value="51650">政协件</option>
                                    <option value="51600">其他</option>
                                </select>
                                <input id="spareString" name="spareString" type="hidden"/>
                            </div>
                        </div>
                    </div>
                    <!--发帖时间-->
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd">来信时间</label>
                            <div class="col-sm-6">
                                <input name="fromTime" id="fromTime" class="form-control" type="text"/>
                            </div>
                            <div class="input-group-append" style="position: absolute;top: 10px;left: 250px;">
                                <span class="glyphicon glyphicon-calendar "></span>
                            </div>
                        </div>
                    </div>
                    <!--是否自动续期-->
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd">自动延期</label>
                            <div class="col-sm-8">
                                <label class="check-box">
                                    <input name="isAutoExtend" value="1" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="isAutoExtend" value="0" type="radio" checked>否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-2 control-label entering-pd">重复来信</label>
                            <div class="col-sm-8">
                                <label class="check-box">
                                    <input name="repeatFlag" value="1" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="repeatFlag" value="0" type="radio" checked>否
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--来信类容-->
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-2 control-label entering-pd is-required">来信内容</label>
                            <div class="col-xs-10">
                            <textarea name="fmContent" id="fmContent"
                                      class="form-control phoneRemark"
                                      style="height: 160px" required></textarea>
                                <!--                                <span>还可以输入<i class="phoneRemarkI">1000</i>个文字</span>-->

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-sm-12">
            <!-- 按钮-->
            <div class="col-sm-12 mb30"
                 style="display: flex;justify-content: center;flex-direction: row;">
                <button type="button" class="btn btn-sm btn-success" onclick="addMail()">保存
                </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-sm btn-warning" onclick="gclose()">关闭
                </button>&nbsp;
            </div>
        </div>
    </form>
</div>
<script th:src="@{/ajax/libs/layui/laydate.js}"></script>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/qxEasyUI/jquery.easyui.min.js}"></script>
<script>
    var prefix = ctx + "system/wsMail";
    var areaSelect = document.getElementById('fmAreaNo');
    var selectText = areaSelect.options[areaSelect.selectedIndex].text;
    var idx = document.getElementById('ddlFrom').selectedIndex
    var txt = document.getElementById("ddlFrom").options[idx].text
    $('input[name="spareString"]').val(txt)

    if(selectText) {
        document.getElementById('fmAreaName').value = selectText;
    }

    //时间
    laydate.render({
        elem: '#fromTime',
        type: 'datetime',
        value: new Date(),
        trigger: 'click'
    });

    $('#qxCT').combotree({
        url: '/system/common/findContentCate',
        required: false,
        onSelect: function (record) {
            $("#txtDcntAcode").val(record.id);
            $("#txtDCntAName").val(record.text);
            $('.combo-text').removeClass('error');
        }
    });

    function addMail(){
        var flag = $.validate.form();
        if($("#txtDcntAcode").val() == '') {
            $('.combo-text').addClass('error');
            flag = false;
        }
        else {
            $('.combo-text').removeClass('error');
        }
        if(flag){
            var form = document.querySelector('#telInputForm');
            var files = form.files;
            //检验图片格式
            if(files !== undefined){
                if(files.files !== undefined){
                    checkImgType(files.files,flag);
                }else{
                    for (let i = 0; i < files.length; i++) {
                        checkImgType(files[i].files,flag);
                    }
                }
            }
            var formData = new FormData(form);
            var url = prefix + '/addMail';
            $.ajax({
                url:url,
                type:'post',
                data: formData,
                // 告诉jQuery不要去处理发送的数据
                contentType: false,
                // 告诉jQuery不要去设置Content-Type请求头
                processData: false,//这两个一定设置为false
                success:function (result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.successTabCallback(result);
                }
            })
        }
    }

    function checkImgType(imgList,flag){
        if (imgList.length !== 0) {
            let imgType=".jpg|.jpeg|.gif|.bmp|.png|";
            for (let i = 0; i < imgList.length; i++) {
                let type = imgList[i].name.split('.')[1].toLowerCase()
                if(imgType.indexOf(type+'|')===-1){
                    $('#imageUpload').addClass('error').setCustomValidity("文件格式错误");
                    flag = false;
                    return;
                }
            }
        }
    }


    //    关闭
    function gclose() {
        $.modal.closeTab();
    }


    function OftenMailWordsChg(e,acpId) {
        temp = $(e.options[e.selectedIndex]).attr('data');
        document.getElementById(acpId).value = temp;
    }

    function addImage() {
        var imgContainer = $('#imgContainer');
        var trHtml = '<tr>\n' +
            '                                <td style="text-align: center" ><input type="file" name="files" accept="image/*" id="imageUpload"/></td>\n' +
            '                                <td style="text-align: center"><a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$(this).parents(\'tr\').remove()"><i class="fa fa-remove"></i>删除</a></td>\n' +
            '                            </tr>';
        imgContainer.append(trHtml);
    }

</script>
</body>
</html>